<template>
	<view>
		<view class="page">
    <comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
    <comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
    <view class="body after-navber">
        <view :class="[data.show_modal?'no-scroll':'']">
            <view class="step1" v-if="data.__user_info.is_distributor==0">
                <view class="info-bg">
                    <image class="bg" :src="data.share_setting.pic_url_1"></image>
                </view>
                <form @submit="formSubmit" reportSubmit="true">
                    <view class="info">
                        <view class="info-label flex-row">
                            <view class="flex-y-center">
                                欢迎加入
                                <view class="info-red" style="width:260upx; overflow: hidden;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;">{{data.dapp.name}}</view>请填写申请信息
                            </view>
                        </view>
                        <view class="info-label info-content flex-row">
                            <view class="info-left flex-y-center">邀请人</view>
                            <view class="info-right flex-row">
                                <view class="info-red flex-grow-0 flex-y-center">{{data.__user_info.parent}}</view>
                                <view class="info-gray flex-group-1 flex-y-center">(请核对)</view>
                            </view>
                        </view>
                        <view class="info-label info-content flex-row">
                            <view class="info-left flex-grow-0 flex-y-center required">姓名</view>
                            <view class="info-right flex-grow-1 flex-row flex-y-center">
                                <input class="name-input" name="name" placeholder="请填写真实姓名" style="width:100%" :value="data.form.name"></input>
                            </view>
                        </view>
                        <view class="info-label info-content flex-row">
                            <view class="info-left flex-grow-0 flex-y-center required">手机号码</view>
                            <view class="info-right flex-grow-1 flex-row flex-y-center">
                                <input class="mobile-input" name="mobile" placeholder="请填写手机号码" style="width:100%" type="number" :value="data.form.mobile"></input>
                            </view>
                        </view>
                        <view class="info-label info-content flex-row">
                            <view @tap="agree" class="info-agree flex-row flex-y-center">
                                <input name="agree" style="display:none" :value="data.agree"></input>
                                <image :src="data.img" style="width:32upx;height:32upx;"></image>
                                <text style="margin-left:10upx;">我已经阅读并了解</text>
                                <view @tap="agreement" style="color:#014c8c">【{{data.share_name}}申请协议】</view>
                            </view>
                        </view>
                    </view>
                    <view class="info-btn flex-row">
                        <button class="flex-y-content info-btn-content" formType="submit">申请成为{{data.share_name}}</button>
                    </view>
                </form>
                <view class="info">
                    <view class="info-label flex-row">
                        <view class="flex-y-center">{{data.share_name}}特权</view>
                    </view>
                    <view class="info-label info-height flex-row" v-if="false">
                        <view class="flex-y-center">
                            <image class="info-icon" :src="data.__wxapp_img.share.shop.url"></image>
                        </view>
                        <view class="info-block">
                            <view class="info-top bold">独立小店</view>
                            <view class="info-bottom">拥有自己的小店及二维码</view>
                        </view>
                    </view>
                    <view class="info-label info-height flex-row">
                        <view class="flex-y-center">
                            <image class="info-icon" :src="data.__wxapp_img.share.money.url"></image>
                        </view>
                        <view class="info-block">
                            <view class="info-top bold">销售拿佣金</view>
                            <view class="info-bottom">成为{{data.share_name}}后卖出商品，您可以获得佣金</view>
                        </view>
                    </view>
                    <view class="info-label info-height flex-row">
                        <view class="flex-y-center info-block">{{data.share_name}}的商品销售统一由厂家直接收款、直接发货，并提供产品的售后服务，分销佣金由厂家统一设置。</view>
                    </view>
                </view>
            </view>
            <view class="step2" v-else>
                <view class="info-bg" style="height:300upx">
                    <image class="bg" :src="data.share_setting.pic_url_2"></image>
                </view>
                <view class="info">
                    <view class="info-title">
                        <image class="info-images" :src="data.__wxapp_img.share.info.url"></image>
                    </view>
                    <view class="info-content">谢谢您的支持，请等待审核！</view>
                    <view class="flex-row info-btn1">
                        <navigator class="flex-y-content btn" openType="redirect" url="/pages/index/index">去商城逛逛</navigator>
                    </view>
                </view>
            </view>
        </view>
        <view :class="['agree-modal flex-x-center flex-y-center', data.show_modal?'':'hidden']">
            <view style="width:600upx;background-color:#fff;border-radius:20upx;">
                <view class="agree-head flex-x-center flex-y-center" style="height:100upx;">分销协议</view>
                <view class="agree-body">
                    <text>{{data.share_setting.agree}}</text>
                </view>
                <view @tap="close" class="agree-footer flex-x-center flex-y-center" style="">我已阅读</view>
            </view>
        </view>
    </view>
    <comp-footer v-bind="{data:data}"></comp-footer>
</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        form: {
            name: "",
            mobile: ""
        },
        img: "/static/images/img-share-un.png",
        agree: 0,
        show_modal: !1
    },
			};
		},
		onLoad: function(e) {myVue = this;myVue = this;
        myVue.getApp.page.onLoad(this, e);
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
        var e = this, t = myVue.getApp.getUser(), a = myVue.getApp.core.getStorageSync(myVue.getApp.const.SHARE_SETTING);
        myVue.getApp.getConfig(function(t) {
            var a = t.dapp, o = "分销商";
            a && a.share_custom_data && (o = a.share_custom_data.words.share_name.name), e.setData({
                share_name: o
            }), uni.setNavigationBarTitle({
                title: "申请成为" + o
            });
        }), myVue.getApp.core.showLoading({
            title: "加载中"
        }), e.setData({
            share_setting: a
        }), myVue.getApp.request({
            url: myVue.getApp.api.share.check,
            method: "POST",
            success: function(a) {
                0 == a.code && (t.is_distributor = a.data, e.getApp.setUser(t), 1 == a.data && e.getApp.core.redirectTo({
                    url: "/pages/share/index"
                })), e.setData({
                    __user_info: t
                });
            },
            complete: function() {
                e.getApp.core.hideLoading();
            }
        });
    },
    onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this);
    },
		methods:{
			formSubmit: function(e) {
        var t = this, a = myVue.getApp.getUser();
        if (t.data.form = e.detail.value, void 0 != t.data.form.name && "" != t.data.form.name) if (void 0 != t.data.form.mobile && "" != t.data.form.mobile) if (/^\+?\d[\d -]{8,12}\d/.test(t.data.form.mobile)) {
            var o = e.detail.value;
            o.form_id = e.detail.formId, 0 != t.data.agree ? (myVue.getApp.core.showLoading({
                title: "正在提交",
                mask: !0
            }), myVue.getApp.request({
                url: myVue.getApp.api.share.join,
                method: "POST",
                data: o,
                success: function(e) {
                    0 == e.code ? (a.is_distributor = 2, t.getApp.setUser(a), t.getApp.core.redirectTo({
                        url: "/pages/add-share/index"
                    })) : t.getApp.core.showToast({
                        title: e.msg,
                        image: "/static/images/icon-warning.png"
                    });
                }
            })) : myVue.getApp.core.showToast({
                title: "请先阅读并确认分销申请协议！！",
                image: "/static/images/icon-warning.png"
            });
        } else myVue.getApp.core.showModal({
            title: "提示",
            content: "手机号格式不正确",
            showCancel: !1
        }); else myVue.getApp.core.showToast({
            title: "请填写联系方式！",
            image: "/static/images/icon-warning.png"
        }); else myVue.getApp.core.showToast({
            title: "请填写姓名！",
            image: "/static/images/icon-warning.png"
        });
    },
		agreement: function() {
        myVue.getApp.core.getStorageSync(myVue.getApp.const.SHARE_SETTING);
        this.setData({
            show_modal: !0
        });
    },
    agree: function() {
        var e = this, t = e.data.agree;
        0 == t ? (t = 1, e.setData({
            img: "/static/images/img-share-agree.png",
            agree: t
        })) : 1 == t && (t = 0, e.setData({
            img: "/static/images/img-share-un.png",
            agree: t
        }));
    },
    close: function() {
        this.setData({
            show_modal: !1,
            img: "/static/images/img-share-agree.png",
            agree: 1
        });
    }
		}
	}
</script>

<style scoped>
.info-bg {
    width: 100%;
    height: 300upx;
    background-color: #f7f7f7;
    margin-bottom: 20upx;
}

.info-bg .bg {
    width: 100%;
    height: 300upx;
}

.step1 .info {
    width: 100%;
    background-color: #fff;
    border-bottom: 1upx #e3e3e3 solid;
    border-top: 1upx #e3e3e3 solid;
    padding: 0 24upx;
}

.info .info-label {
    width: 100%;
    height: 100upx;
    border-bottom: 1upx #e3e3e3 solid;
    color: #353535;
}

.info .info-label:last-child {
    border-bottom: none;
}

.info .info-label .info-red {
    color: #ff4544;
}

.info .info-label .info-gray {
    color: #666;
}

.info .info-label.info-content {
    height: 100upx;
}

.info-label .info-left {
    width: 176upx;
}

.info-label .info-left.required::after {
    content: "*";
    color: #ff4544;
}

.info-label .info-agree {
    font-size: 10pt;
}

.info-btn {
    padding: 24upx;
    background-color: #f7f7f7;
    width: 100%;
}

.info-btn .info-btn-content {
    width: 100%;
    background-color: #ff4544;
    color: #fff;
    font-weight: bold;
    height: 100upx;
    line-height: 100upx;
}

.info-label .info-icon {
    width: 60upx;
    height: 60upx;
    margin-right: 24upx;
}

.info .bold {
    font-weight: bold;
}

.info .info-label.info-height {
    height: auto;
}

.info .info-label .info-block {
    padding: 24upx 0;
}

.info-block .info-top {
    margin-bottom: 16upx;
}

.info-block .info-bottom {
    font-size: 9pt;
}

.step2 .info {
    padding: 48upx 24upx;
    text-align: center;
}

.step2 .info .info-title {
    width: 100%;
    padding: 40upx 0;
}

.info-title .info-images {
    width: 80upx;
    height: 80upx;
}

.step2 .info-btn1 {
    margin-top: 88upx;
    padding: 0 24upx;
    width: 100%;
}

.step2 .info-btn1 .btn {
    width: 100%;
    background-color: #ff4544;
    color: #fff;
    font-weight: bold;
    height: 100upx;
    line-height: 100upx;
    border-radius: 10upx;
}

.agree-modal {
    position: fixed;
    left: 0;
    top: var(--window-top);
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}

.agree-body {
    height: 720upx;
    overflow: auto;
    padding: 10upx 20upx;
}

.agree-footer {
    width: 100%;
    height: 100upx;
    color: #fff;
    background-color: #ff4544;
    border-radius: 0 0 20upx 20upx;
}
</style>
